<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单提交
        1. 点击提交时先获取数据  user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com

        2. 提交数据到指定url 数据和url之间用?分隔
        http://127.0.0.1:5500/day14/html/login.html?user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com
    
    -->

    <div>
        <button class="get">获取</button>
        <button class="set">设置</button>
    </div>
    <form action="./login.html" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <!-- 页面加载时默认禁用 disabled="disabled" 简写 disabled  -->
            <!-- 页面加载时默认隐藏 hidden="hidden" 简写 hidden  -->
            <input type="text" name="user" disabled="disabled" hidden="hidden" placeholder="用户名">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <!-- 页面加载时默认必填 required="required" 简写 required  -->
            <input type="text" name="pwd" required="required">
        </div>
        <div class="input-group">
            <label>
                <!-- 页面加载时默认选中 checked="checked" 简写 checked  -->
                <input type="checkbox" checked="checked" name="isRem">
                是否记住用户名?
            </label>
        </div>



        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>

</body>
<script>

    // 元素节点的内置属性(表单相关)

    // 表单状态相关
    // disabled   获取和设置表单元素是否禁用 (true->禁用 false->不禁用)
    // required   获取和设置表单元素是否必填 (true->必填  false->选填)
    // hidden     获取和设置表单元素是否隐藏 (true->隐藏  false->显示)
    // checked    获取和设置表单元素是否被选中(单选框 复选框) (true->被选中  false->未选中)


    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];

    var form = document.querySelector("form");

    var userInp = document.querySelector("[name='user']")
    var pwdInp = document.querySelector("[name='pwd']")
    var yearSel = document.querySelector("[name='year']")
    var isRem = document.querySelector("[name='isRem']")


    getBtn.onclick = function () {
        // console.log(userInp.disabled);
        // console.log(userInp.required);
        // console.log(userInp.hidden);
        console.log(isRem.checked);
    }

    setBtn.onclick = function () {
        // 如果已禁用 解禁,否则就禁用
        userInp.disabled = userInp.disabled ? false : true;

        // userInp.disabled = false;
        // userInp.hidden = false;
        // pwdInp.required = false;

        isRem.checked = isRem.checked ? false : true;
    }








</script>

</html>